three.js如何使用gridhelper在线演示

three.js gridhelper demo

three, grid, helper

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2518
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

var scene, renderer;
	var camera, light;

init();
	animate();
	function init() {
		renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );
		//
		camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
		camera.position.z = 400;
		scene = new THREE.Scene();
		light = new THREE.PointLight();
		light.position.set( 200, 100, 150 );
		scene.add( light );
		scene.add( new THREE.PointLightHelper( light, 15 ) );
		
      var gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
		gridHelper.position.y = - 150;
		gridHelper.position.x = 0;
		scene.add( gridHelper );

}
	
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	function animate() {
		requestAnimationFrame( animate );
		var time = - performance.now() * 0.0003;
		//camera.position.x = 400 * Math.cos( time );
		//camera.position.z = 400 * Math.sin( time );
		//camera.lookAt( scene.position );
		//light.position.x = Math.sin( time * 1.7 ) * 300;
		//light.position.y = Math.cos( time * 1.5 ) * 400;
		//light.position.z = Math.cos( time * 1.3 ) * 300;

renderer.render( scene, camera );
	}
</script>

three.js gridhelper demo

three, grid, helper

编辑器支持Emmet

快捷键

three.js gridhelper demo

three, grid, helper

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：