渲染流程源码探究

src/index.js

@@ -1,22 +1,41 @@
-import * as THREE from 'three';
+import "@babel/polyfill";
+import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js';
 import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
+import { Scene } from 'three/src/scenes/Scene.js';
+import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
+
 //创建场景
-var scene = new THREE.Scene();
+var scene = new Scene();
 
 //创建模型和material
-var geometry = new THREE.SphereBufferGeometry(10,10,10);
-var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
+var geometry = new THREE.SphereBufferGeometry(20, 10, 50);
+var material = new MeshBasicMaterial({
+    color: 0xffff00
+});
+
 
 var mesh = new THREE.Mesh(geometry, material);
 scene.add(mesh);
 
+var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 0, 100);
+camera.lookAt(scene.position);
 
-//光照
+var renderer = new WebGLRenderer();
+
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setClearColor("rgb(25, 25, 25)", 1); //设置背景颜色
+document.body.appendChild(renderer.domElement);
+
+renderer.render(scene, camera);
+
+
+/*//光照
 var ambient = new THREE.AmbientLight(0x004444); //环境光
 var point = new THREE.PointLight(0xffffff);
-point.position.set(400, 200, 300); //点光源位置
+point.position.set(400, 200, 301); //点光源位置
 
 //布置场景
 // scene.add(ambient);
@@ -24,7 +43,7 @@ point.position.set(400, 200, 300); //点光源位置
 
 // 辅助坐标系
 var axisHelper = new THREE.AxesHelper(250);
-//scene.add(axisHelper);
+scene.add(axisHelper);
 
 //创建摄像机
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
@@ -33,6 +52,7 @@ camera.lookAt(scene.position);
 
 //创建渲染器
 var renderer = new WebGLRenderer();
+
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setClearColor("rgb(255, 255, 255)", 1); //设置背景颜色
 document.body.appendChild(renderer.domElement);
@@ -45,4 +65,4 @@ function render() {
 render();
 
 //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
-controls.addEventListener('change', render);
+controls.addEventListener('change', render);*/