您的位置：首页 > Web前端 > JavaScript
three.js 场景入门

2016-11-01 17:53 344 查看
<!DOCTYPE html>

<html>

<head>
<title>Example 01.02 - First Scene</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

// once everything is loaded, we run our Three.js stuff.
$(function () {

// 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.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// create a render and set the size
var renderer = new THREE.WebGLRenderer();

renderer.setClearColorHex(0xEEEEEE);//渲染器背景颜色：白色
renderer.setSize(window.innerWidth, window.innerHeight);//渲染场景的尺寸

var axes = new THREE.AxisHelper( 20 );//创建一个axes（坐标轴）对象
scene.add(axes);//用scene.add()函数将坐标轴添加到场景中

// create the ground plane 创建场景
var planeGeometry = new THREE.PlaneGeometry(60,20);//定义平面的尺寸，宽60，高20
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//定义平面的外观 如颜色，透明度，这里我们创建了一个基本的材质MeshBasicMaterial()方法，还有颜色
var plane = new THREE.Mesh(planeGeometry,planeMaterial);//把这两个对象合并到一个名为plane的网格中

// rotate and position the plane  绕x轴旋转90度然后通过设置位置属性定义它在场景中的位置。
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0

// add the plane to the scene
scene.add(plane);//把plane添加到scene

// create a cube 方块
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//线框属性：true
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// position the cube
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;

// add the cube to the scene
scene.add(cube);

//create a  sphere 球体
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

// position the sphere
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;

// add the sphere to the scene
scene.add(sphere);

// 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);//使用lookat()函数指向场景的中心

// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);//使用jQuery来选择正确的输出元素

// render the scene
renderer.render(scene, camera);//并告诉渲染器使用相机把场景渲染出来
});

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航