three. Basic framework created by JS

three.js Basic framework created

First, two tutorial documents are given
Download package address
file 1
file 2

1. First let's download three library

npm i [email protected]0.139 -S
 perhaps 
npm i [email protected]0.133 -S

This article is based on these two versions

This is mainly about 3 Introductions
1.three.js It's a direct introduction THREE object
2.three.module.js Is in html Kind of script Of type=module Introduced
3.jsm It is the reference of some plug-ins

The main difference is module It is different from the ordinary introduction, or an error will be reported

2. Build the basic framework

		// Create a scene 
  		var scene = new THREE.Scene();
  		// Create objects  100*100*100
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        var material = new THREE.MeshLambertMaterial({
    
            color: 0x4d90fe,// The color of the object 
            opacity: 0.4,// Object transparency 
            transparent: true// To enable transparency, you must have , Otherwise, even if there is transparency, it will not work 
        });
        var cube = new THREE.Mesh(geometry, material);// Add objects to the mesh body 
        scene.add(cube); // Objects are added to the scene 
        cube.position.set(50, 50, 50)// Set the position of the object 


        //  Add light source 
        const ambient = new THREE.AmbientLight(0xffffff, 0.5)// Add ambient light 
        scene.add(ambient)
        //const pointLight = new THREE.PointLight(0xffffff, 0.6)// Add electro-optic 
        //pointLight.position.set(200, 200, 210)// Set the spot light position 
        //scene.add(pointLight)
		
		// Add axis   red x  green y  blue z  The color can be set later   The parameter is the length of the coordinate axis   Too small will be in the object 
        const axesHelper = new THREE.AxesHelper(150)
        scene.add(axesHelper)



        //  Visualize point lights 
        const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);// Similar to the light source above 
        scene.add(pointLightHelper);

        //  Add a camera 
        const width = 1000
        const height = 1000
        var camera = new THREE.PerspectiveCamera(450, width / height, 10, 1000); // The camera   angle   Near point   Stay away  
        camera.position.set(100, 200, 200) // Camera position 
        camera.lookAt(300, 0, 300)// The camera looks at that point 



        //  Add renderer 
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);// Render size 
        document.querySelector('#app').appendChild(renderer.domElement); // Rendered dom

		// Animation 
        const clock = new THREE.Clock()// Default 1s60 frame   So you can cycle through the animation 
        function render() {
    
            const spt = clock.getDelta()
            // console.log(' Render interval ',spt);
            renderer.render(scene, camera) // Camera rendering 
            cube.rotateY(0.001)
            requestAnimationFrame(render)
        }
        render()
		// The camera control can be dragged by viewing angle 
        const controls = new THREE.OrbitControls(camera, renderer.domElement)// Camera controls  
        controls.target.set(300, 0, 300)// With the camera lookAt The coordinates are the same 
        controls.update()// Triggering event 

Here is a pit ,
controls.target.set(300, 0, 300)// With the camera lookAt The coordinates are the same
controls.update()// Triggering event
If this string of code is not added, it will affect the coordinate origin , Find that even if you set camera.lookAt(300, 0, 300)// The camera looks at that point Camera point but it doesn't work , Add these two lines of code updated It will be executed internally camera.lookAt.target How to change So if you find that you have set the coordinate origin but have not changed the origin , You can add these two lines of code

This expands a knowledge point
requestAnimationFrame This is a window One way to do this is ES6 Of , Its function is to execute every second 60 Always execute , amount to setInterval