import React, { useEffect,useRef } from "react"; import * as THREE from "three" import wood from '../src/assets/wood2.jpg' import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls' import * as dat from "dat.gui"; const ThreeSceen=()=>{ const sceneRef=useRef() useEffect(()=>{ const world=new THREE.Scene() const camera =new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); camera.position.z=5 const renderer=new THREE.WebGL1Renderer() renderer.setSize(window.innerWidth,window.innerHeight) const htmlResult=renderer.domElement sceneRef.current.appendChild(htmlResult) const boxGeometry=new THREE.BoxGeometry() const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load(wood); // Replace with the path to your texture image const boxMaterial=new THREE.MeshStandardMaterial({map:texture,color:"white",}) const box=new THREE.Mesh(boxGeometry,boxMaterial) box.position.y=5 box.castShadow=true const controls = new OrbitControls(camera, htmlResult); controls.update(); world.add(box) const gridHelper=new THREE.GridHelper(30) world.add(gridHelper) const placeGeometry=new THREE.PlaneGeometry(30,30) const planeMaterial=new THREE.MeshStandardMaterial({ color:"white", side:THREE.DoubleSide }) const plane=new THREE.Mesh(placeGeometry,planeMaterial) plane.rotation.x=-0.5*Math.PI world.add(plane) /* const ambientLight=new THREE.AmbientLight(0xffffff,10) world.add(ambientLight) */ /* const direactionLight=new THREE.DirectionalLight(0xffffff,2) direactionLight.position.y=10 world.add(direactionLight) */ /* const lightHepler=new THREE.DirectionalLightHelper(direactionLight) world.add(lightHepler) */ const spotLight=new THREE.SpotLight(0xffffff,30) const spotLightHelper= new THREE.SpotLightHelper(spotLight) spotLight.position.y=10 world.add(spotLight) world.add(spotLightHelper) const sphereGeometry=new THREE.SphereGeometry() const sphereMaterial=new THREE.MeshStandardMaterial({color:"blue",wireframe:true}) const sphere =new THREE.Mesh(sphereGeometry,sphereMaterial) sphere.position.x=4 sphere.position.y=6 world.add(sphere) const gui = new dat.GUI(); const options = { sphereColor: 0xff0000, wireframe:false, }; const sphereColorControl = gui.addColor(options, "sphereColor"); sphereColorControl.onChange(function (color) { sphere.material.color.set(color); }); const sphereWireFrameControl=gui.add(options,'wireframe') sphereWireFrameControl.onChange(function(wireframe){ sphere.material.wireframe=wireframe }) const sphereSpeedOption={ speed:0.5 } gui.add(sphereSpeedOption,"speed",0,0.1) let step=0 const animateShere = () => { requestAnimationFrame(animateShere); step+=sphereSpeedOption.speed sphere.position.y=10*Math.abs(Math.sin(step)) renderer.render(world, camera); } animateShere() const animate = () => { requestAnimationFrame(animate); box.rotation.x += 0.01; box.rotation.y += 0.01; renderer.render(world, camera); }; animate() window.addEventListener("resize",()=>{ renderer.setSize(window.innerWidth,window.innerHeight) renderer.render(world, camera); }) return(()=>{ //window.removeEventListener("resize") renderer.dispose(); }) },[]) return( ) } export default ThreeSceen

Spotlight in 3d you mean?

@paradise_hope

10 ай бұрын

Focus on object