init

4 years ago · ff73ae530f
23 changed files with 2414 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,14 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "chrome": "67"
+                },
+                "useBuiltIns": "usage",
+                "corejs": "3.6.4"
+            }
+        ]
+    ]
+}
--- 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/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'
+                }
+            }
+        ]
+    }
+};