three实现三维黄金首饰店内戒指展示旋转效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维黄金首饰店内戒指展示旋转效果代码
代码标签: three 三维 黄金 首饰店 戒指 展示 旋转
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/158/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/158/jsm/" } } </script> <style> body{ overflow: hidden; margin: 0; } </style> </head> <body translate="no"> <script type="module"> import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; console.clear(); let scene = new THREE.Scene(); scene.background = new THREE.Color("gray"); let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 100); camera.position.set(0, 1.5, 8).setLength(25); let renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); window.addEventListener("resize", (event) => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); // https://www.blockadelabs.com/ let texLoader = new THREE.TextureLoader(); let envMap = await texLoader.loadAsync( "//repo.bfw.wiki/bfwrepo/images/JewelryShop.jpg" ); envMap.colorSpace = THREE.SRGBColorSpace; envMap.mapping = THREE.EquirectangularRefractionMapping; scene.environment = envMap; scene.background = envMap; let controls = new OrbitControls(camera, renderer.domElement); controls.autoRotate = true; controls.autoRotateSpeed *= 0.5; controls.enableDamping = true; controls.minPolarAngle = Math.PI / 3; controls.maxPolarAngle = (Math.PI / 3) * 2; controls.maxDistance = 40; //let light = new THREE.DirectionalLight(0xffffff, Math.PI * 2); //light.position.setScalar(1); //scene.add(light, new THREE.AmbientLight(0xffffff, Math.PI * 0.5)); let holder = new THREE.Group(); holder.rotation.y = -Math.PI / 3; holder.position.y = 3; scene.add(holder); let radius = 5; let g = new THREE.LatheGeometry( new THREE.Path() .moveTo(radius, 0) .lineTo(radius, -0.7) .absarc(radius+.1, -0.7, 0.1, Math.PI, Math.PI * 1.5) .absarc(radius+.1, -0.9, 0.1, Math.PI * 0.5, Math.PI * 1.5) .absarc(radius+.3, -0.9, 0.1, Math.PI * 1.5, Math.PI * 2) .lineTo(radius+.5, -0.6) .bezierCurveTo(radius+.7, -0.6, radius+.7, 0.6, radius+.5, 0.6) .absarc(radius+.3, 0.9, 0.1, 0, Math.PI * 0.5) .absarc(radius+.1, 0.9, 0.1, Math.PI * 0.5, Math.PI * 1.5) .absarc(radius+.1, 0.7, 0.1, Math.PI * 0.5, Math.PI) .lineTo(radius+.0) .getPoints(100), 180.........完整代码请登录后点击上方下载按钮下载查看
网友评论0