three.js gridhelper 正对屏幕

使用lookAt，从Y轴正向看向原点

webgl, three, grid, helper

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

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

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( 45, window.innerWidth / window.innerHeight, 1, 1000 );
		camera.position.set( 0, 1.6, 0 );
		scene = new THREE.Scene();
		scene.background = new THREE.Color( 0xa0a0a0 );
		//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
      camera.lookAt(scene.position);

var gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
		gridHelper.position.y = -200;
		gridHelper.position.x = 0;
		scene.add( gridHelper );

//window.addEventListener( 'resize', onWindowResize, false );
	}
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	//
	function animate() {
		requestAnimationFrame( animate );

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

使用lookAt，从Y轴正向看向原点

webgl, three, grid, helper

编辑器支持Emmet

快捷键

使用lookAt，从Y轴正向看向原点

webgl, three, grid, helper

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

webgl three.js 上帝之手（把2d图像转换为3d图像）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：