"Three.js" auxiliary coordinate axis

Brief introduction

give the thumbs-up  +  Focus on  +  Collection  =  Learned to

In daily development and learning , The coordinate axis can roughly help us locate the position and relationship of elements . So I use  

Three.js

  When learning and developing, the coordinate axis will be opened .

This article USES the  

Three.js

  Version of ：

137

code

Before using the axis , Let's create an element first , It makes it easier for us to understand the coordinate axis .

<style>
 body {
 margin: 0;
 }
</style>

<div id=&quot;canvasBox&quot;></div>

<script type=&quot;module&quot;>
 import {
 Scene,
 PerspectiveCamera,
 WebGLRenderer,
 BoxGeometry,
 MeshBasicMaterial,
 Mesh
 } from '../js/Three/Three.js'



 //  scene
 const scene = new Scene()

 //  The camera
 const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

 //  Renderers
 const renderer = new WebGLRenderer()

 //  Set the size of the renderer to the size of the window
 renderer.setSize(window.innerWidth, window.innerHeight)

 //  Bind the renderer to the specified DOM In the elements
 document.getElementById('canvasBox').appendChild(renderer.domElement)

 //  Geometry
 const geometry = new BoxGeometry()

 //  Mesh base material , Set the color
 const material = new MeshBasicMaterial({color: 0xff2299})
 const cube = new Mesh(geometry, material)
 scene.add(cube)

 //  Set the camera to z The distance on the axis
 camera.position.x = -3
 camera.position.y = 5
 camera.position.z = 5

 //  Aim the camera at the center of the scene
 camera.lookAt(scene.position)

 //  Rotate the cube properly
 cube.rotation.x += 0.8
 cube.rotation.y += 0.8

 //  Add the scene and camera to the renderer and perform rendering
 renderer.render(scene, camera)
</script>


The effect is coming out .

Create axes

To add a coordinate axis, you need to introduce  

AxesHelper

<!--  Omit the above  html  Code  -->
<script type=&quot;module&quot;>
 import {
 //  Omit the previous introduction
 AxesHelper
 } from '../js/Three/Three.js'

 //  Omitted code ...

 //  Create axes
 const axes = new AxesHelper()
 //  Add axes to the scene
 scene.add(axes)

 //  Add the scene and camera to the renderer and perform rendering
 renderer.render(scene, camera)
</script>


Now you can see the coordinate axis

Set the axis length

From the example above , The axis is a little short , Therefore, it is recommended to pass in a length when creating the coordinate axis .

This example passes a relatively small value for demonstration , The real project will be passed on 50、100 Like that .

const axes = new AxesHelper(2)

The axis looks much longer than before .

Sets the axis color

From the above case, we can find , The default color of the axis is ：

red 、 green 、 blue

. If you want to customize the color of the axis , have access to  

setColors

  Make changes . This method needs to be passed to 3 Two parameters go in .

//  Create axes
const axes = new AxesHelper(2)
//  Sets the axis color
axes.setColors('pink', 0xf0ff00, 'rgb(60, 200, 130)')


If you only pass 1 Parameters , that 3 The color of each axis will be the same .

If only pass 2 Parameters , So the first 3 The value of the first parameter will be taken directly to the 2 The value of parameters , therefore y and z The color of the shaft is the same .

In both cases, it is recommended that you test manually , I won't post code here ~

Code warehouse

Three.js  Axis