5 changed files with 136 additions and 8 deletions
-
137content/index.blade.php
-
7content/master.blade.php
-
BINfiles/car.glb
-
BINfiles/photo_studio_01_1k.hdr
-
BINfiles/room5.glb
@ -1 +1,136 @@ |
|||
This is the Index Page |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|||
<title></title> |
|||
</head> |
|||
<body> |
|||
<div id="root"></div> |
|||
<div id="container"></div> |
|||
<script type="module"> |
|||
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js'; |
|||
import { |
|||
OrbitControls |
|||
} from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js'; |
|||
import { |
|||
GLTFLoader |
|||
} from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js'; |
|||
import { |
|||
RGBELoader |
|||
} from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/RGBELoader.js'; |
|||
|
|||
let container; |
|||
let camera, scene, renderer; |
|||
let controls; |
|||
const clock = new THREE.Clock(); |
|||
var envMap; |
|||
|
|||
init(); |
|||
animate(); |
|||
|
|||
function init() { |
|||
|
|||
container = document.getElementById('container'); |
|||
|
|||
// |
|||
scene = new THREE.Scene(); |
|||
console.log(scene) |
|||
|
|||
// |
|||
renderer = new THREE.WebGLRenderer({ |
|||
alpha: true, |
|||
antialias: true |
|||
}); |
|||
renderer.setPixelRatio(window.devicePixelRatio); |
|||
renderer.setSize(window.innerWidth, window.innerHeight); |
|||
renderer.toneMapping = THREE.ACESFilmicToneMapping; |
|||
renderer.xr.enabled = true; |
|||
renderer.localClippingEnabled = true; |
|||
renderer.physicallyCorrectLights = true; |
|||
renderer.outputEncoding = THREE.sRGBEncoding; |
|||
renderer.toneMappingExposure = 0.7; |
|||
container.appendChild(renderer.domElement); |
|||
|
|||
var pmremGenerator = new THREE.PMREMGenerator(renderer); |
|||
pmremGenerator.compileEquirectangularShader(); |
|||
|
|||
camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 20000); |
|||
camera.position.set(0, 0, 10); |
|||
|
|||
// |
|||
new RGBELoader() |
|||
.setDataType(THREE.UnsignedByteType) |
|||
.setPath('../') |
|||
.load("resources/views/template/minimal-theme/files/photo_studio_01_1k.hdr", function (texture2) { |
|||
envMap = pmremGenerator.fromEquirectangular(texture2).texture; |
|||
scene.environment = envMap; |
|||
texture2.dispose(); |
|||
pmremGenerator.dispose(); |
|||
}); |
|||
|
|||
// |
|||
const loader = new GLTFLoader(); |
|||
loader.setPath('../'); |
|||
loader.load('resources/views/template/minimal-theme/files/room5.glb', function (gltf) { |
|||
|
|||
gltf.scene.traverse(function (child) { |
|||
if (child.material) { |
|||
if (child.name == "Object_6") { |
|||
child.material.map.wrapS = THREE.RepeatWrapping; |
|||
child.material.map.wrapT = THREE.RepeatWrapping; |
|||
child.material.map.repeat.x = 10; |
|||
child.material.map.repeat.y = 10; |
|||
} |
|||
} |
|||
}); |
|||
|
|||
scene.add(gltf.scene); |
|||
}); |
|||
|
|||
// |
|||
const loader2 = new GLTFLoader(); |
|||
loader2.setPath('../'); |
|||
loader2.load('resources/views/template/minimal-theme/files/car.glb', function (gltf) { |
|||
|
|||
gltf.scene.scale.set(30, 30, 30); |
|||
gltf.scene.position.set(10, 0, 12); |
|||
|
|||
var bb = new THREE.Box3() |
|||
bb.setFromObject(gltf.scene); |
|||
bb.center(controls.target); |
|||
|
|||
scene.add(gltf.scene); |
|||
}); |
|||
|
|||
// |
|||
controls = new OrbitControls(camera, renderer.domElement); |
|||
controls.maxPolarAngle = Math.PI * 0.495; |
|||
controls.target.set(11, 5, 12); |
|||
controls.minDistance = 0.5; |
|||
controls.maxDistance = 14; |
|||
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled |
|||
controls.dampingFactor = 0.05; |
|||
controls.update(); |
|||
|
|||
// |
|||
window.addEventListener('resize', onWindowResize); |
|||
} |
|||
|
|||
function onWindowResize() { |
|||
camera.aspect = window.innerWidth / window.innerHeight; |
|||
camera.updateProjectionMatrix(); |
|||
renderer.setSize(window.innerWidth, window.innerHeight); |
|||
} |
|||
|
|||
function animate() { |
|||
renderer.setAnimationLoop(render); |
|||
} |
|||
|
|||
function render(timestamp, frame) { |
|||
renderer.render(scene, camera); |
|||
controls.update(); |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue