您的位置：首页 > Web前端 > JavaScript

第一节：three.js

2018-01-05 16:39 204 查看

本节从webgl中文网学习：http://www.hewebgl.com/article/getarticle/50

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>canvas {width: 100%;height: 100%}</style>
<script src="js/ThreeJS/three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene(); //场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //透视相机
var renderer = new THREE.WebGLRenderer(); //渲染器，决定了渲染结果应该画在页面的什么元素上面，并且以怎么的方式来绘制
renderer.setSize(window.innerWidth, window.innerHeight); //定义渲染器大小（窗口宽度，窗口高度）
/* renderer的domElement元素，表示画布，所有的渲染都是画在domElement上,appendChild表示
将这个domElement挂接在body下面，让渲染的结果在页面中显示*/
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1, 1, 1); //定义几何体（x,y,z）
var material = new THREE.MeshBasicMaterial({ color: 0xffff00f }); //定义基础网格材质（{颜色}）
var cube = new THREE.Mesh(geometry, material); //定义mesh(几何体，材质)
scene.add(cube); //加入场景
camera.position.z = 10; //设定位置，z轴距离
camera.position.x = 5;
//渲染，分为离线渲染和实时渲染
function render() {
requestAnimationFrame(render); //执行一次，然后调用function render()，形成循环，实时渲染
//cube.rotation.x += 0.01; //rotation旋转，沿着x轴，旋转速度
cube.rotation.y += 0.01;
renderer.render(scene, camera); //执行渲染
}
render(); //执行渲染函数
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： three.js 3D JavaScript

相关文章推荐

新的分享

章节导航