Threejs 基于webGL的3D开发神器
废话不多说，官网自己百度下， threejs.org ，入门很简单。
创建的javascript脚本如下
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);
document.body.appendChild(renderer.domElement);
// Refresh Issue
window.addEventListener('resize', function () {
var width = this.window.innerWidth;
var height = this.window.innerHeight;
render.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
})
//orbit contorls
controls = new THREE.OrbitControls(camera,renderer.domElement);
//create the shape
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
//createa meterial
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
//var myMaterial = ;
//var material = new THREE.MeshFaceMaterial(myMaterial);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
//rotate
var update = function () {
cube.rotation.x += .01;
cube.rotation.y += .02;
cube.rotation.z += .02;
}
var render = function () {
renderer.render(scene, camera);
}
var Gameloop = function () {
requestAnimationFrame(Gameloop);
update();
render();
}
Gameloop();
引入争取的html，
<!DOCTYPE html>
<html>
<head>
<title>hello ThreeJS</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
h1 {
color: aqua;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="myjs.js"></script>
</body>
</html>
效果点击这里：
http://plmhome.com/doteam/lesson1.html
页:
[1]