Skip to content

Instantly share code, notes, and snippets.

@sourrain
Created Sep 8, 2021
Embed
What would you like to do?
<template>
<div>
<canvas id="three" class="h-screen w-screen bg-white"></canvas>
</div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
mounted() {
this.initThree();
},
methods: {
initThree() {
const scene = new THREE.Scene();
scene.background = new THREE.Color("#eee");
const canvas = document.querySelector("#three");
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 100);
camera.position.z = 3;
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 0, 0);
controls.update();
const geometry = new THREE.BoxGeometry(2, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const loader = new THREE.TextureLoader();
const texture = loader.load(
"https://threejsfundamentals.org/threejs/resources/images/equirectangularmaps/tears_of_steel_bridge_2k.jpg",
() => {
const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
rt.fromEquirectangularTexture(renderer, texture);
scene.background = rt.texture;
}
);
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
},
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment