After graduation, I became accustomed to buying genuine books. It is estimated that I bought four or five thousand yuan books in more than two years. It makes sense that the book has its own golden house, but in modern society, this book refers to a large number of books.
The book "Three.js Development Guide" just arrived at night, about one-third of the time, and I don't feel that it is difficult, because I have the foundation of the secondary development of Unity3D and Revit before, and I also learned some Opengl, see this part. You can see what's going on at a glance. So graphic imagery is the basis of this kind of software.
At this stage, I only seek the quantity of knowledge, not the quality. The same is true of blogs. I don’t have much time to organize, and I am too lazy to do typesetting. When I reach a certain level, I should pay attention to these.
Well, let's start directly with the content of this third part.
1. What compiler do you use to start Webgl first?
I think Visual Studio is the best way to directly create a new project ASP.NET web application, which saves the trouble of configuring the web server, and I am also used to using Visual Studio. Then the browser running Webgl is naturally Chrome.
2. Create the first 3D scene
Modifications to the framework of the previous blog:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.js"></script>
<script src="js/stats.js"></script>
<script src="js/Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
function initTween() {
new TWEEN.Tween(mesh.position)
.to({ x: -400 }, 3000).repeat(Infinity).start();
}
was renderer;
var stats;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
renderer.shadowMapEnabled = true;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0,0,0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.PointLight(0x00FF00);
light.position.set(0, 0, 300);
light.castShadow = true;
scene.add(light);
}
var cube;
var mesh;
var mesh2;
var mesh3;
function initObject() {
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/a.jpg') });
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 300);
mesh.castShadow = true;
scene.add(mesh);
var geometry2 = new THREE.PlaneGeometry(600, 200, 1,1);
var material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/a.jpg') });
mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.position.set(200, 0, -100);
mesh2.receiveShadow = true;
scene.add(mesh2);
var geometry3 = new THREE.SphereGeometry(100,20,20);
var material3 = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
var mesh3 = new THREE.Mesh(geometry3, material3);
mesh3.position.set(100, -150, 200);
mesh3.castShadow = true;
scene.add(mesh3);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
//initTween();
}
function animation() {
mesh.rotation.x += 0.1;
mesh.rotation.y += 0.1;
//mesh2.position.x += 10;
renderer.render(scene, camera);
requestAnimationFrame(animation);
stats.update();
//TWEEN.update();
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
It's ugly, but the key point is out.
1) The effects of light sources and shadows are added through the following lines of code:
mesh.castShadow = true;
mesh2.receiveShadow = true;
mesh3.castShadow = true;
light.castShadow = true;
renderer.shadowMapEnabled = true;
2) There is nothing special about creating geometry. The materials here are MeshLambertMaterial and MeshPhongMaterial, which will react to the light source.
3. Add GUI
Add the library dat.gui.js for GUI.
Among the key sentences:
controls = new function () {
this.rotationSpeed = 0.1;
} //define parameters
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5); //parameters are associated with GUI
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.js"></script>
<script src="js/stats.js"></script>
<script src="js/Tween.js"></script>
<script src="js/dat.gui.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
function initTween() {
new TWEEN.Tween(mesh.position)
.to({ x: -400 }, 3000).repeat(Infinity).start();
}
var controls;
was renderer;
var stats;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
controls = new function () {
this.rotationSpeed = 0.1;
}
var gui = new dat.GUI ();
gui.add(controls, 'rotationSpeed', 0, 0.5);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0,0,0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00);
light.position.set(0, 0, 300);
scene.add(light);
}
var cube;
var mesh;
function initObject() {
var geometry = new THREE.CubeGeometry(100, 100, 100);
geometry.vertices[0].uv = new THREE.Vector2(0, 0);
geometry.vertices[1].uv = new THREE.Vector2(1, 0);
geometry.vertices[2].uv = new THREE.Vector2(1, 1);
geometry.vertices[3].uv = new THREE.Vector2(0, 1);
var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/a.jpg') });
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
initTween();
}
function animation() {
mesh.rotation.x += controls.rotationSpeed;
renderer.render(scene, camera);
requestAnimationFrame(animation);
stats.update();
//TWEEN.update();
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>