Warm tip: This article is reproduced from stackoverflow.com, please click
javascript three.js

Rendering grid around box Three.js

发布于 2020-04-10 16:09:07

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 (e.g. 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.

Questioner
three1four
Viewed
65
分享
manthrax 2020-02-02 03:34

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 i.e. 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})))

Related issues

1
Getting .json is not a function on Promise.all w/fetch
2
Javascript for loop only giving one output
3
find array value that index matches another array values
4
React
5
Communication between two components using ReactJS
6
Figma Plugin: callback on file updated
7
indexof() partial match issue
8
React useState hook and submit in multi step form
9
How do i get this firebase data to use it outside the loop?
10
How to define a font size that scales with browser zoom level?