Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add some notes #37

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add some notes #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c14219
添加了中文注释
XD1729 Jul 12, 2021
fd36302
Rename NOTE-02-first-scene.html to 02改-first-scene.html
XD1729 Jul 12, 2021
bdadc1c
Rename 02改-first-scene.html to 02笔记-first-scene.html
XD1729 Jul 12, 2021
cebdc89
Update 04-materials-light-animation.html
XD1729 Jul 12, 2021
ea6ef74
Rename 02笔记-first-scene.html to 02-first-scene.html
XD1729 Jul 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions chapter-01/02-first-scene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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框架的<div>元素中。我们使用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;

</script>
</body>
</html>
</html>
15 changes: 10 additions & 5 deletions chapter-01/04-materials-light-animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/*
如果希望我们的场景动起来，那么首先需要解决的问题是如何在特定的时间间隔重新渲染场景,requestAnimationFrame函数为稳定而连续的渲染场景提供了良好的解决方案。通过这个函数，你可以向浏览器提供一个回调函数。你无须定义回调间隔，浏览器将自行决定最佳回调时机。
*/
<!DOCTYPE html>

<html>
Expand All @@ -6,7 +9,7 @@
<title>Example 01.04 - Materials, light and animation</title>
<script type="text/javascript" src="../libs/three.js"></script>

<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>//在动画运行时，该库可以在一个图片中显示画面每秒传输帧数。
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
Expand Down Expand Up @@ -108,7 +111,8 @@
// call the render function
var step = 0;
renderScene();


//在renderScene函数中每渲染完一帧后，调用stats.update函数更新统计。
function renderScene() {
stats.update();
// rotate the cube around its axes
Expand All @@ -122,17 +126,18 @@
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

// render using requestAnimationFrame
requestAnimationFrame(renderScene);
requestAnimationFrame(renderScene);//在renderScene()方法中，requestAnimationFrame()方法又一次被调用了，这样做的目的是保证动画能够持续运行。
renderer.render(scene, camera);
}


function initStats() {

var stats = new Stats();

stats.setMode(0); // 0: fps, 1: ms

// Align top-left
// 统计图形将会显示在浏览器左上方Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
Expand All @@ -146,4 +151,4 @@

</script>
</body>
</html>
</html>