<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="js/three.js"></script>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<script>
$(function(){
// 场景
var scene = new THREE.Scene();
// 相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 0.5);
renderer.setSize(window.innerWidth, window.innerHeight);
// 创建坐标轴
var axes = new THREE.AxisHelper(20);
scene.add(axes)
// 创建平面 宽60 高20
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 平面的外观 颜色透明度
var planeMaterial = new THREE.MeshBasicMaterial(
{ color: 0xcccccc }
);
// 添加平面
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane)
// 添加方块
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMeterial = new THREE.MeshBasicMaterial({
color:0xff0000,wireframe:true
});
var cube = new THREE.Mesh(cubeGeometry,cubeMeterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
// 添加球体
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({
color:0x7777ff,wireframe:true
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z= 2;
scene.add(sphere);
// 相机位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
// 为了确保相机能够拍摄到这些物体,我们使用lookAt()函数指向场景的中心
camera.lookAt(scene.position);
// 将renderer的输出挂接到HTML页面框架中的<div>元素
$("#WebGL-output").append(renderer.domElement);
renderer.render(scene,camera)
})
</script>
</body>
</html>
《Three.js开发指南》学习笔记一
猜你喜欢
转载自blog.csdn.net/zhongshijun521/article/details/80367631
今日推荐
周排行