Блог

Я хочу смешать HTML и three.js, но если я вставлю URL-адрес, все сцены не будут работать.

 .img{ width: 300px; height: 300px; background-color: chartreuse; background:url('../static/img/Fabio.jpg'); }  

введите описание изображения здесь

Я хочу вставить изображение на эту бумагу, но если я не напишу URL-адрес фонового изображения в CSS или не вставлю изображение в HTML, это будет работать следующим образом. введите описание изображения здесь

Я положил все script.js здесь, но я не думаю, что проблема отсюда.

 import './style.css' import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import * as dat from 'dat.gui' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' import { BooleanKeyframeTrack } from 'three'  let person; let umbrella; let paper; let skySphere;  /**  * Base  */ // Debug const gui = new dat.GUI()  // Canvas const canvas = document.querySelector('canvas.webgl')  // Scene const scene = new THREE.Scene() const modelgroup = new THREE.Group(); scene.add(modelgroup);  /**  * Models  */ const dracoLoader = new DRACOLoader() dracoLoader.setDecoderPath('/draco/')  const gltfLoader = new GLTFLoader() gltfLoader.setDRACOLoader(dracoLoader)  let mixer = null   const loader = new GLTFLoader(); loader.load(  '/models/person/scene.gltf',  function(gltf){   person = gltf.scene;  person.position.y = 0.8;  person.rotation.z = -Math.PI/60;  person.rotation.x = -Math.PI/10;  person.rotation.y = -Math.PI/20;  person.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; } } );  modelgroup.add(person);     });    loader.load(  '/models/umbrella/scene.gltf',  function(gltf){  umbrella = gltf.scene;  umbrella.scale.setScalar(0.70);  umbrella.position.x=-0.5;  // umbrella.position.y = 0.04;  umbrella.position.z = 0.5;  // umbrella.rotation.z=Math.PI/40;  // umbrella.rotation.x = -Math.PI/40;  umbrella.rotation.y = Math.PI/10;  umbrella.rotation.z = Math.PI/15;   umbrella.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; } } );  modelgroup.add(umbrella);  umbrella.traverse( function ( child ) {  if ( child.isMesh ) {  child.material.emissive = child.material.color;  child.material.emissiveMap = child.material.map ;  }  } );    });   loader.load(  '/models/paper/scene.gltf',  function(gltf){   paper = gltf.scene;  paper.scale.setScalar(0.015);  paper.position.y = 0.6;  paper.position.x = -0.32;  paper.position.z = 0.581;   //   paper.rotation.z = -Math.PI/3.5;  paper.rotation.x =Math.PI/1.8;  paper.rotation.y = Math.PI/2.9;        paper.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; } } );  modelgroup.add(paper);     });  function createSkySphere(file) {  const geometry = new THREE.SphereGeometry(50, 50, 40);  // Invert the geometry on the x-axis so that all of the faces point inward  geometry.scale(-1, 1, 1);    const texture = new THREE.TextureLoader().load(file);  texture.encoding = THREE.sRGBEncoding;  const material = new THREE.MeshBasicMaterial({ map: texture });  skySphere = new THREE.Mesh(geometry, material);    scene.add(skySphere);  }  createSkySphere("park.jpg");  /**  * Floor  */ const floor = new THREE.Mesh(  new THREE.PlaneBufferGeometry(60, 8),  new THREE.MeshStandardMaterial({  color: '#444444',  metalness: 0,  roughness: 0.5  }) ) floor.receiveShadow = true; floor.rotation.x = - Math.PI * 0.5 floor.castShadow =false; scene.add(floor)  /**  * Lights  */ const ambientLight = new THREE.AmbientLight(0xfffacd, 0.8) scene.add(ambientLight)   const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4) directionalLight.castShadow = true directionalLight.shadow.mapSize.set(1024, 1024) directionalLight.shadow.camera.far = 20 directionalLight.shadow.camera.left = - 7 directionalLight.shadow.camera.top = 8 directionalLight.shadow.camera.right = 7 directionalLight.shadow.camera.bottom = - 7 directionalLight.position.set(- 3, 5, 6) scene.add(directionalLight)  /**  * Sizes  */ const sizes = {  width: window.innerWidth,  height: window.innerHeight-1 }  window.addEventListener('resize', () =gt; {  // Update sizes  sizes.width = window.innerWidth  sizes.height = window.innerHeight   // Update camera  camera.aspect = sizes.width / sizes.height  camera.updateProjectionMatrix()   // Update renderer  renderer.setSize(sizes.width, sizes.height)  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) })  /**  * Camera  */ // Base camera const camera = new THREE.PerspectiveCamera(65, sizes.width / sizes.height, 0.01, 400) camera.position.set(0, 1.5, 3) scene.add(camera)  // Controls const controls = new OrbitControls(camera, canvas) controls.target.set(0, 0.75, 0) controls.enableDamping = true  /**  * Renderer  */ const renderer = new THREE.WebGLRenderer({  canvas: canvas,  alpha:true }) renderer.shadowMap.enabled = true renderer.shadowMap.type = THREE.PCFSoftShadowMap renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))  /**  * Animate  */ const clock = new THREE.Clock() let previousTime = 0  const tick = () =gt; {  const elapsedTime = clock.getElapsedTime()  const deltaTime = elapsedTime - previousTime  previousTime = elapsedTime   // Model animation  if(mixer)  {  mixer.update(deltaTime)  }   // Update controls  controls.update()   // Render  renderer.render(scene, camera)   // Call tick again on the next frame  window.requestAnimationFrame(tick) }  tick()