
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第1个three.js_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<!--<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>-->
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
var scene = new THREE.Scene();
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var sphereMaterial=new THREE.MeshPhongMaterial({
color:0x0000ff,
specular:0x4488ee,
shininess:12
});
var mesh1 = new THREE.Mesh(geometry1, sphereMaterial);
scene.add(mesh1);
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({
color: 0xff00ff
});
var mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.translateY(120);
scene.add(mesh2);
var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
var material3 = new THREE.MeshLambertMaterial({
color: 0xffff00
});
var mesh3 = new THREE.Mesh(geometry3, material3);
mesh3.position.set(120,0,0);
scene.add(mesh3);
var geometry4 = new THREE.BufferGeometry();
var vertices = new Float32Array([
0, 0, 0,
200, 0, 0,
0, 100, 0,
0, 0, 10,
0, 0, 100,
50, 0, 10,
]);
var colors = new Float32Array([
1, 0, 0,
0, 1, 0,
0, 0, 1,
1, 1, 0,
0, 1, 1,
1, 0, 1,
]);
geometry4.attributes.color = new THREE.BufferAttribute(colors, 3);
var material4 = new THREE.PointsMaterial({
vertexColors: THREE.VertexColors,
size: 10.0
});
var points = new THREE.Points(geometry4, material4);
scene.add(points);
var material4=new THREE.LineBasicMaterial({
color:0xff0000
});
var line=new THREE.Line(geometry4,material4);
scene.add(line);
var geometry5 = new THREE.BoxGeometry(100, 100, 100);
var material5 = new THREE.MeshLambertMaterial({
color: 0x0000ff
});
var mesh5 = new THREE.Mesh(geometry5, material5);
mesh5.position.set(200,0,0);
scene.add(mesh5);
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);
var point = new THREE.PointLight(0xffffff);
point.position.set(200, 0, 0);
scene.add(point);
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300);
scene.add(point2);
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene,camera);
requestAnimationFrame(render);
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);
</script>
</body>
</html>