취미 블로그

Nuxt: 2.15.3

Vue 프레임워크의 SSR(Server Side Rendering)인 Nuxt에서 Three.js 적용하는 법을 알아봅시다.

우선 Three.js를 설치합니다.

npm i --save three

설치하고 공식 manual 페이지에 있는 Drawing lines 예제를 작성합니다.

여기서 저는 Line 색을 빨강색(0xff0000)으로 변경했습니다.

Drawing lines – three.js docs (threejs.org)

<template>
  <div class="container" style="position:absolute">
  </div>
</template>

<script>
import * as THREE from 'three';

let camera, scene, renderer;

export default {
    name: 'TheCanvas',
    data: function() {

      return {
        
      }
    },
    mounted: function() {
      scene = new THREE.Scene();
      renderer = new THREE.WebGLRenderer();
      
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
      camera.position.set( 0, 0, 100 );
      camera.lookAt( 0, 0, 0 );

      var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
      var points = [];
      points.push( new THREE.Vector3( - 10, 0, 0 ) );
      points.push( new THREE.Vector3( 0, 10, 0 ) );
      points.push( new THREE.Vector3( 10, 0, 0 ) );

      const geometry = new THREE.BufferGeometry().setFromPoints( points );
      const line = new THREE.Line( geometry, material );
      scene.add( line );
      renderer.render( scene, camera );
    }
}

</script>

<style>
</style>

작성이 완료되었으면 nuxt를 실행시킵니다.

npm run dev

빌드가 완료되고 페이지를 접속하면 다음과 같은 메세지를 보게 됩니다.

이를 해결하기 위해 nuxt.config.js > build에 

다음과 같이 입력합니다.

export default {
  ...
  
  ...
  
  
  ...
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [
      "three"
    ],
  }
}

그리고 다시 Nuxt를 실행하면

정상적인 페이지를 볼 수 있습니다.

출처

vue.js - How do I import Three.js into my Nuxt project - Stack Overflow

Nuxt - The build Property (nuxtjs.org)

pageHeight = document.body.scrollHeight

pageWidth = document.body.scrollWidth;

windowWidth = window.innerWidth

windowHeight = window.innerHeight

screenWidth =  screen.width;

screenHeight = screen.height;

출처: https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window