Big guy Threejs personal website link: www.ryan-floyd.com/

Big man nuggets link: juejin.cn/post/698503…

Personal Description:

I just feel big guy’s this kind of personal website style is very nice, so I also want to learn, and oneself also can a drop of threejs, and have no other meaning, hee hee ~

At present I general code, create 3D scene and a series of initialization, the file is as follows:

var scene; // camera var camera; Var renderer; // Let controls; let renderCount = -5 * 60; function incRenderCount() { renderCount += 2; } let grid; function initThree(canvas3d) { let canvas_bound = canvas3d.getBoundingClientRect(); scene = new THREE.Scene(); // camera // create 3D world let w = canvas_bound.width; let h = canvas_bound.height; Renderer = new THREE. Renderer({canvas: canvas3d, antialias: {canvas: canvas3d, antialias: {canvas: canvas3d, antialias: True, // Anti-aliasing preserveDrawingBuffer: true, //3D plus this can turn white in thumbnails antiAlias: true, alpha: true}); renderer.setSize(w, h); renderer.setClearColor(new THREE.Color("#778A99")); // Change the renderer background to white renderer.setPixelRatio(2); PerspectiveCamera = new THREE.PerspectiveCamera(70, w/h, 0.1, 2200); Camera.position. set(-154.24513482840493, 173.01753880699488, -178.2074663736008); camera.lookAt(scene.position); // Render the camera position to the scene camera.up.x = 0; Camera.up. y = 1; camera.up.z = 0; OrbitControls(Camera, canvas3D) = New THREE.OrbitControls(Camera, Canvas3D); // Whether controls can be scaled. EnableZoom = true; // Set the maximum distance of the camera from the origin. controls.maxDistance = 700; Let cameraLight = new THREE.DirectionalLight(0xFFFFFF, 0.3); cameraLight.position.copy(camera.position); scene.add(cameraLight); controls.addEventListener("change", function () { // console.log("camera", camera.position.x, camera.position.y, camera.position.z); cameraLight.position.copy(camera.position); renderCount += 2; }); function addLights() { const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); hemiLight.position.set(0, 20, 0); scene.add(hemiLight); const dirLight = new THREE.DirectionalLight(0xffffff); dirLight.position.set(0, 10, 0); scene.add(dirLight); } scene.background = new THREE.Color(0xe0e0e0); scene.fog = new THREE.Fog(0xe0e0e0, 20, 1200); addLights(); const floor = new THREE.Mesh(new THREE.PlaneGeometry(2100, 2100), new THREE.MeshBasicMaterial({ color: 0xffffff, depthWrite: false })); floor.rotation.x = - Math.PI / 2; floor.position.y = -60; scene.add(floor); grid = new THREE.GridHelper(2000, 15, 0x000000, 0x000000); The grid. The material. The opacity = 0.2; grid.material.transparent = true; scene.add(grid) grid.position.y = -60; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // renderer.setClearColor(0xffffff, 1); renderCount++; Function animate() {requestAnimationFrame(animate); // renderer.render(scene, camera); if (renderCount > 0) { renderer.render(scene, camera); renderCount = 0; } else if (renderCount < 0) { renderer.render(scene, camera); renderCount++; } } animate(); } let canvas = document.getElementById("canvas3d"); initThree(canvas); module.exports = { renderer, camera, scene, renderCount, incRenderCount, grid, }Copy the code

conclusion

I hope I can stick to it, not to say that we must have more days, at least one workday a day, but if the future work is busy, record it. Come on!