init

4 years ago · ad94d5b22f
23 changed files with 2424 additions and 0 deletions
--- a/dist/b3dd3229bb7d217104f5bbbe79a855e0.png
+++ b/dist/b3dd3229bb7d217104f5bbbe79a855e0.png
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>My first three.js app</title>
 		<style>
 			body { margin: 0; }
 			canvas { display: block; }
 		</style>
 	</head>
 	<body>
 		<script type="text/javascript" src="main.js"></script>
 	</body>
 </html>
--- a/dist/main.js
+++ b/dist/main.js
--- a/package.json
+++ b/package.json
@ -0,0 +1,31 @@
 {
  "name": "babel_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5",
    "@babel/plugin-transform-arrow-functions": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.2",
    "file-loader": "^6.1.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.11.5",
    "three": "^0.120.1"
  }
 }
--- a/src/css/style.css
+++ b/src/css/style.css
@ -0,0 +1,8 @@
@charset "UTF-8";
 .box {
    width: 300px;
    height: 300px;
    background-color: red;
    background-image: url("../res/head.png");
 }
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,44 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import "./css/style.css";
 //创建场景
 var scene = new THREE.Scene();
 //创建模型和material
 var geometry = new THREE.SphereGeometry(30, 60, 60);
 var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
 var mesh = new THREE.Mesh(geometry, material);
 //光照
 var ambient = new THREE.AmbientLight(0x080808, 1.6); //环境光
 var point = new THREE.PointLight(0xffffff);
 //point.position.set(0, 40, 0);
 point.position.set(0, 0, 100); //点光源位置
 //布置场景
 scene.add(mesh);
 scene.add(ambient);
 scene.add(point);
 //创建摄像机
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
 camera.position.set(0, 0, 100);
 camera.lookAt(0, 0, 0);
 //创建渲染器
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setClearColor(0x000000, 1); //设置背景颜色
 document.body.appendChild(renderer.domElement);
 const controls = new OrbitControls(camera, renderer.domElement);
 // 渲染函数
 function render() {
    renderer.render(scene, camera); //执行渲染操作
 }
 render();
 //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
 controls.addEventListener('change', render);
--- a/src/model.js
+++ b/src/model.js
@ -0,0 +1,9 @@
 let fun1 = ()=>{
 	console.log("fun1 is called");
 }
 let fun2 = ()=>{
 	console.log("fun2 is called");
 }
 export {fun1,fun2}
--- a/src/res/Cube.obj
+++ b/src/res/Cube.obj
@ -0,0 +1,70 @@
 # This file uses centimeters as units for non-parametric coordinates.
 mtllib Cube.mtl
 g default
 v -0.500000 -0.500000 0.500000
 v 0.500000 -0.500000 0.500000
 v -0.500000 0.500000 0.500000
 v 0.500000 0.500000 0.500000
 v -0.500000 0.500000 -0.500000
 v 0.500000 0.500000 -0.500000
 v -0.500000 -0.500000 -0.500000
 v 0.500000 -0.500000 -0.500000
 vt 0.375000 0.000000
 vt 0.625000 0.000000
 vt 0.375000 0.250000
 vt 0.625000 0.250000
 vt 0.375000 0.500000
 vt 0.625000 0.500000
 vt 0.375000 0.750000
 vt 0.625000 0.750000
 vt 0.375000 1.000000
 vt 0.625000 1.000000
 vt 0.875000 0.000000
 vt 0.875000 0.250000
 vt 0.125000 0.000000
 vt 0.125000 0.250000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 1.000000 0.000000
 vn 0.000000 1.000000 0.000000
 vn 0.000000 1.000000 0.000000
 vn 0.000000 1.000000 0.000000
 vn 0.000000 0.000000 -1.000000
 vn 0.000000 0.000000 -1.000000
 vn 0.000000 0.000000 -1.000000
 vn 0.000000 0.000000 -1.000000
 vn 0.000000 -1.000000 0.000000
 vn 0.000000 -1.000000 0.000000
 vn 0.000000 -1.000000 0.000000
 vn 0.000000 -1.000000 0.000000
 vn 1.000000 0.000000 0.000000
 vn 1.000000 0.000000 0.000000
 vn 1.000000 0.000000 0.000000
 vn 1.000000 0.000000 0.000000
 vn -1.000000 0.000000 0.000000
 vn -1.000000 0.000000 0.000000
 vn -1.000000 0.000000 0.000000
 vn -1.000000 0.000000 0.000000
 s 1
 g Cube
 usemtl initialShadingGroup
 f 1/1/1 2/2/2 3/3/3
 f 3/3/3 2/2/2 4/4/4
 s 2
 f 3/3/5 4/4/6 5/5/7
 f 5/5/7 4/4/6 6/6/8
 s 3
 f 5/5/9 6/6/10 7/7/11
 f 7/7/11 6/6/10 8/8/12
 s 4
 f 7/7/13 8/8/14 1/9/15
 f 1/9/15 8/8/14 2/10/16
 s 5
 f 2/2/17 8/11/18 4/4/19
 f 4/4/19 8/11/18 6/12/20
 s 6
 f 7/13/21 1/1/22 5/14/23
 f 5/14/23 1/1/22 3/3/24
--- a/src/res/Quad.obj
+++ b/src/res/Quad.obj
@ -0,0 +1,21 @@
 # This file uses centimeters as units for non-parametric coordinates.
 mtllib Quad.mtl
 g default
 v -0.500000 -0.500000 0.000000
 v 0.500000 -0.500000 0.000000
 v -0.500000 0.500000 0.000000
 v 0.500000 0.500000 0.000000
 vt 0.000000 0.000000
 vt 1.000000 0.000000
 vt 0.000000 1.000000
 vt 1.000000 1.000000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 0.000000 1.000000
 vn 0.000000 0.000000 1.000000
 s 1
 g Quad
 usemtl initialShadingGroup
 f 1/1/1 2/2/2 3/3/3
 f 3/3/3 2/2/2 4/4/4
--- a/src/res/Sphere.obj
+++ b/src/res/Sphere.obj
--- a/src/res/back.bmp
+++ b/src/res/back.bmp
--- a/src/res/bottom.bmp
+++ b/src/res/bottom.bmp
--- a/src/res/earth.bmp
+++ b/src/res/earth.bmp
--- a/src/res/front.bmp
+++ b/src/res/front.bmp
--- a/src/res/grass.png
+++ b/src/res/grass.png
--- a/src/res/head.png
+++ b/src/res/head.png
--- a/src/res/left.bmp
+++ b/src/res/left.bmp
--- a/src/res/right.bmp
+++ b/src/res/right.bmp
--- a/src/res/stone.bmp
+++ b/src/res/stone.bmp
--- a/src/res/top.bmp
+++ b/src/res/top.bmp
--- a/src/res/wood.bmp
+++ b/src/res/wood.bmp
--- a/24
+++ b/24
@ -0,0 +1,24 @@
 "use strict";
 var _model = require("./model.js");
 (0, _model.fun1)();
 (0, _model.fun2)();
 "use strict";
 Object.defineProperty(exports, "__esModule", {
  value: true
 });
 exports.fun2 = exports.fun1 = void 0;
 var fun1 = function fun1() {
  console.log("fun1 is called");
 };
 exports.fun1 = fun1;
 var fun2 = function fun2() {
  console.log("fun2 is called");
 };
 exports.fun2 = fun2;
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,37 @@
 const path = require('path');
 module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|obj)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
 };