From 3c142193b921e0ad824cec01540189cf1cf262ba Mon Sep 17 00:00:00 2001 From: XD1729 <67259379+XD1729@users.noreply.github.com> Date: Tue, 13 Jul 2021 01:10:18 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E4=B8=AD?= =?UTF-8?q?=E6=96=87=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...st-scene.html => NOTE-02-first-scene.html} | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) rename chapter-01/{02-first-scene.html => NOTE-02-first-scene.html} (61%) diff --git a/chapter-01/02-first-scene.html b/chapter-01/NOTE-02-first-scene.html similarity index 61% rename from chapter-01/02-first-scene.html rename to chapter-01/NOTE-02-first-scene.html index ea1ffff2..aae7f4f4 100644 --- a/chapter-01/02-first-scene.html +++ b/chapter-01/NOTE-02-first-scene.html @@ -25,7 +25,7 @@ // once everything is loaded, we run our Three.js stuff. function init() { - // create a scene, that will hold all our elements such as objects, cameras and lights. + // create a scene场景画面, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // create a camera, which defines where we're looking at. @@ -34,20 +34,20 @@ // create a render and set the size var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(); - renderer.setClearColor(new THREE.Color(0xEEEEEE)); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setClearColor(new THREE.Color(0xEEEEEE));//设置场景的背景色 + renderer.setSize(window.innerWidth, window.innerHeight);//window.innerWidth和window.innerHeight将整个页面窗口指定为渲染区域 // show axes in the screen - var axes = new THREE.AxisHelper(20); - scene.add(axes); + var axes = new THREE.AxisHelper(20);//坐标轴轴线粗细为20 + scene.add(axes);//将轴添加到场景中 // create the ground plane - var planeGeometry = new THREE.PlaneGeometry(60, 20); - var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc}); - var plane = new THREE.Mesh(planeGeometry, planeMaterial); + var planeGeometry = new THREE.PlaneGeometry(60, 20);//平面大小宽60, 长20 + var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//创建基本材质来设置平面外观 + var plane = new THREE.Mesh(planeGeometry, planeMaterial);//将大小和外观组合进Mesh对象并赋值给平面变量 - // rotate and position the plane - plane.rotation.x = -0.5 * Math.PI; + //在将平面添加到场景之前，还需要设置平面的位置. + plane.rotation.x = -0.5 * Math.PI;//先将平面围绕x轴旋转90度，然后使用position属性来定义其在场景中的位置 plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; @@ -57,7 +57,7 @@ // create a cube var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); - var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}); + var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//将线框（wireframe）属性设置为true，这样物体就不会被渲染为实体物体 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // position the cube @@ -81,20 +81,20 @@ // add the sphere to the scene scene.add(sphere); - // position and point the camera to the center of the scene + //摄像机将决定哪些东西会被渲染到场景中 position and point the camera to the center of the scene camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; - camera.lookAt(scene.position); + camera.lookAt(scene.position);//用lookAt方法指向场景的中心，默认状态下摄像机是指向（0，0，0）位置 - // add the output of the renderer to the html element + //将渲染的结果添加到HTML框架的
元素中。我们使用JavaScript来选择需要正确输出的元素并使用appendChild方法将结果添加到div元素中。add the output of the renderer to the html element document.getElementById("WebGL-output").appendChild(renderer.domElement); - // render the scene + // render the scene最后告诉渲染器使用指定的摄像机来渲染场景。 renderer.render(scene, camera); } window.onload = init; - \ No newline at end of file + From fd36302e17db7405c2b2bd0858c1f520a8685dac Mon Sep 17 00:00:00 2001 From: XD1729 <67259379+XD1729@users.noreply.github.com> Date: Tue, 13 Jul 2021 01:13:13 +0800 Subject: [PATCH 2/5] =?UTF-8?q?Rename=20NOTE-02-first-scene.html=20to=2002?= =?UTF-8?q?=E6=94=B9-first-scene.html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../02\346\224\271-first-scene.html" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename chapter-01/NOTE-02-first-scene.html => "chapter-01/02\346\224\271-first-scene.html" (100%) diff --git a/chapter-01/NOTE-02-first-scene.html "b/chapter-01/02\346\224\271-first-scene.html" similarity index 100% rename from chapter-01/NOTE-02-first-scene.html rename to "chapter-01/02\346\224\271-first-scene.html" From bdadc1c47ff9ada4f588e0adc2ff16c67061f4bd Mon Sep 17 00:00:00 2001 From: XD1729 <67259379+XD1729@users.noreply.github.com> Date: Tue, 13 Jul 2021 01:13:56 +0800 Subject: [PATCH 3/5] =?UTF-8?q?Rename=2002=E6=94=B9-first-scene.html=20to?= =?UTF-8?q?=2002=E7=AC=94=E8=AE=B0-first-scene.html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../02\347\254\224\350\256\260-first-scene.html" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "chapter-01/02\346\224\271-first-scene.html" => "chapter-01/02\347\254\224\350\256\260-first-scene.html" (100%) diff --git "a/chapter-01/02\346\224\271-first-scene.html" "b/chapter-01/02\347\254\224\350\256\260-first-scene.html" similarity index 100% rename from "chapter-01/02\346\224\271-first-scene.html" rename to "chapter-01/02\347\254\224\350\256\260-first-scene.html" From cebdc899e4f27da94314248524cab09e6c399239 Mon Sep 17 00:00:00 2001 From: XD1729 <67259379+XD1729@users.noreply.github.com> Date: Tue, 13 Jul 2021 06:29:19 +0800 Subject: [PATCH 4/5] Update 04-materials-light-animation.html --- chapter-01/04-materials-light-animation.html | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/chapter-01/04-materials-light-animation.html b/chapter-01/04-materials-light-animation.html index 3c10f937..c1506f5c 100644 --- a/chapter-01/04-materials-light-animation.html +++ b/chapter-01/04-materials-light-animation.html @@ -1,3 +1,6 @@ +/* +如果希望我们的场景动起来，那么首先需要解决的问题是如何在特定的时间间隔重新渲染场景,requestAnimationFrame函数为稳定而连续的渲染场景提供了良好的解决方案。通过这个函数，你可以向浏览器提供一个回调函数。你无须定义回调间隔，浏览器将自行决定最佳回调时机。 +*/ @@ -6,7 +9,7 @@ Example 01.04 - Materials, light and animation - + //在动画运行时，该库可以在一个图片中显示画面每秒传输帧数。