threejs 初试体验

需要用到web 3d.  找了下, 只能 webGL 了.  

 

看了webgl 的老书, 2012年的, 但是准确来说, 这书可比文档好多了.对于我这样新手.

 

感觉是很神奇, 第一章的序言, 讲了webgl, 后面, 就是全用threejs了. 也是正常. 因为看了第一章的样子, 我觉得, 再原教旨主义的人, 应该也不会全部用原生webgl吧. shader是自己写的, 用c语言的模式, 把源码做成字符串传进去, 这种操作方式, 我是想不通的. 

 

还好, 有threejs.  书里的第一个例子.

 

 
 var renderer,
 	scene,
 	camera,
 	cube,
 	animating=true;

 renderer=new THREE.WebGLRenderer( {antialias:true} );
 renderer.setSize(500,500);


 document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 45, 1, 1, 4000);
camera.position.set(0,0,3);

var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set(0,0,1);
scene.add(light);


var map = THREE.ImageUtils.loadTexture('a.jpg');

var geometry = new THREE.BoxGeometry( 1,1,1);
var material = new THREE.MeshPhongMaterial( {map:map} );
var cube = new  THREE.Mesh(geometry, material);
cube.rotation.x = 1;
 scene.add(cube);

function run(){
	 
	renderer.render(scene,camera);
	if(animating){
		cube.rotation.y -= 0.01;
	}
	requestAnimationFrame(run);
}

run();

看起来, 还真是挺清晰.   流程明确.

 

布置现场

演员到位

开始

 

一个都不能少.

布置现场

最终要的, 是主办方   renderer

然后是    舞台        sence

然后是    摄像,  灯光        camera, light 

3d这东西, 似乎就是真的用 现实世界的表演来模拟出来的.

 

演员进场

演员本人,  geometry

穿什么衣服 material

 

然后是开动, run

 

说起来就是这么简单的事儿.但其实很困难.

这东西最好用树把依赖全都给标出来. 嗯, 我是这么觉得的. 玩儿3d, 你就是个导演.