在盒子 Three.js 周围渲染网格

Question

Currently, I have created a box buffer geometry that is 8x8x8 in dimension. I would like to put a grid around it that matches those dimensions (eg 64 squares on each side). Is there any efficient ways to do this in three.js? My current solution is creating 16 intersecting lines for each side of the cube, but these add up quickly and are inefficient for performance.

Answer 1

The badass way is to use this technique:

http://madebyevan.com/shaders/grid/

A simpler way.. is to create a grid texture or grab one off of google image search.. preferably in a power of 2 size ie 64x64 128x128 or 256x256 etc...

and use that as the .map of a MeshBasicMaterial()

texture = new THREE.TextureLoader().load('yourGridTextureImage.jpg') texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 4, 4 );

scene.add(new THREE.Mesh(new THREE.PlaneGeometry(64,64),new THREE.MeshBasicMaterial({map: texture})))