How to implement Three.js scene example in Vue 3? #9057

three-vue-noob · 2023-08-27T17:37:45Z

three-vue-noob
Aug 27, 2023

Hi,

it would be awesome if you would share how to implemnt the Three.js scene example [1] into Vue 3.

[1] https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Example code:
main.js

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
	requestAnimationFrame( animate );

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
}

animate();

index.html

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="/main.js"></script>
	</body>
</html>

Answered by Shyam-Chen

Aug 28, 2023

https://play.vuejs.org/#eNp9VFFP2zAY/CtWXghb5gShalLXIgHqYNPYECDxkheTfG3cJXZmO22g6n/fZzsNCUJIVZTcnc/ns91dcF7XdNNAMA1mOlO8NkSDaeqzVPCqlsqQHVGwjIgUN7IRBnKyJ0slK3KEo46+9bJPhGnycH23WHS0KRQ4QSoyKbQhhqkVGDK3fuHxgNAZCEBcwNY70HuLOI1XZKwCxUaSW1C6hszwDVw6Nvw6iciWi1xuKRcC1CPPTUHiEXYNfFWYiCT0JCInSZIMcygQOShQo3ke4enq113HuEgHGcWi7vkLhJMkiQg+hl4rkBUY9TzyupDtVYeHdn78va6xYgYUZ+VoxA3o4oJpnt10bLgjmSylmpKkTZLlMknIftBT8zQu0o4PD1mifg47wrVOWZ6HdlSX3TVJa6m54VLQFzSbOGbZCOxaCsJww9ElPCa7VBDs7F8D2pw7FPnvCi3CTuRNiYtFlTROQVvyeY4bkJwg+5Z7HnDevuvav4QudNSdB2u/t7r+bIYYa37mk/njRjesbHCZdY0GlwUv87D3zGW1KKECYawTeV2a9bWPWeyvBF4G/DBQ1SXy+EXILOcbe5DnaeAnSoOzWYwgsrN4IA2iwN+QLxWr6VpLgVfNBUw7QqfB1Ee2mLs2FkmDwphaT+M4y8Va06yUTb4smQKay…

View full answer

Shyam-Chen · 2023-08-28T06:44:58Z

Shyam-Chen
Aug 28, 2023

https://play.vuejs.org/#eNp9VFFP2zAY/CtWXghb5gShalLXIgHqYNPYECDxkheTfG3cJXZmO22g6n/fZzsNCUJIVZTcnc/ns91dcF7XdNNAMA1mOlO8NkSDaeqzVPCqlsqQHVGwjIgUN7IRBnKyJ0slK3KEo46+9bJPhGnycH23WHS0KRQ4QSoyKbQhhqkVGDK3fuHxgNAZCEBcwNY70HuLOI1XZKwCxUaSW1C6hszwDVw6Nvw6iciWi1xuKRcC1CPPTUHiEXYNfFWYiCT0JCInSZIMcygQOShQo3ke4enq113HuEgHGcWi7vkLhJMkiQg+hl4rkBUY9TzyupDtVYeHdn78va6xYgYUZ+VoxA3o4oJpnt10bLgjmSylmpKkTZLlMknIftBT8zQu0o4PD1mifg47wrVOWZ6HdlSX3TVJa6m54VLQFzSbOGbZCOxaCsJww9ElPCa7VBDs7F8D2pw7FPnvCi3CTuRNiYtFlTROQVvyeY4bkJwg+5Z7HnDevuvav4QudNSdB2u/t7r+bIYYa37mk/njRjesbHCZdY0GlwUv87D3zGW1KKECYawTeV2a9bWPWeyvBF4G/DBQ1SXy+EXILOcbe5DnaeAnSoOzWYwgsrN4IA2iwN+QLxWr6VpLgVfNBUw7QqfB1Ee2mLs2FkmDwphaT+M4y8Va06yUTb4smQKaySpma9bGJX/SsRuBzjEe6smEJh1QybwpLZ4G1huL2mMWo/GkLPnqTRJ0rHkJ6k9tt2GciJWl3P50mFENRAc8KyD7+w6+1q3Pf6tAg9rganru0JWlF/e/ocX3nvSJPyTvQMuysRm97KIROcYe6FzaH65YLlYPetEaEPqwKBvUteH0aYD/YZcfLP017ik97Vvc/wdu+8GD

1 reply

three-vue-noob Aug 28, 2023
Author

Thank you, Shyam-Chen!

I'll paste your code here for reference.

App.vue

<script setup>
import { ref, onMounted } from 'vue';
import * as THREE from 'three';

const target = ref();

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

onMounted(() => {
  target.value.appendChild(renderer.domElement);
  animate();
});
</script>

<template>
  <div ref="target"></div>
</template>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

How to implement Three.js scene example in Vue 3? #9057

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Vue

How to implement Three.js scene example in Vue 3? #9057

three-vue-noob Aug 27, 2023

Replies: 1 comment · 1 reply

Shyam-Chen Aug 28, 2023

three-vue-noob Aug 28, 2023 Author

three-vue-noob
Aug 27, 2023

Replies: 1 comment 1 reply

Shyam-Chen
Aug 28, 2023

three-vue-noob Aug 28, 2023
Author