美文网首页
Three.js学习笔记(1)

Three.js学习笔记(1)

作者: 羽阁丶 | 来源:发表于2019-04-16 18:52 被阅读0次

前言

由于近期的一些业务需要用到一些webgl的东西,three.js可以说是webgl相关库里最完善的,所以毫无疑问的开始了three.js入坑之旅

搭建开发环境

由于webpack搭建环境太过麻烦(懒),所以这里选择了parcel来进行打包,主要包括一个入口的index.html文件和一个index.js文件。同时在这个目录下运行yarn add three
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>threejs</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

index.js

import * as THREE from 'three'
window.THREE = THREE
// init scene
const scene = new THREE.Scene()

// init camera
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000000
)
camera.position.z = 5

// init renderer
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0xeeeeee)
document.body.appendChild(renderer.domElement)

// init light
const light = new THREE.AmbientLight(0xffffff, 2)
scene.add(light)

// init controls
require('three/examples/js/controls/OrbitControls')
const controls = new THREE.OrbitControls(camera, renderer.domElement)

// init object
const geometry = new THREE.BoxGeometry(2, 2, 2)
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// handle window resize
window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
})

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
  controls.update()
}

animate()

运行代码

cd到上面那两个文件的同级目录下,运行parcel index.html,parcel会在1234端口启动开发服务,并且在代码修改后会自动刷新。
当parcel显示打包完成后,打开localhost:1234就可以看到一个绿色的正方体在屏幕中央了
一个简单的demo就这样运行起来了,接下来我们就可以基于这个模板去探究three.js更深层的东西了~

相关文章

  • 3D世界

    前言最近在学习three.js,以下是我的笔记。 相关概念了解 1.WebGL与Three.js 1.1什么是We...

  • Three.js学习笔记(1)

    前言 由于近期的一些业务需要用到一些webgl的东西,three.js可以说是webgl相关库里最完善的,所以毫无...

  • 书架选书Tween补间动画应用--Apple的学习笔记

    Three.js模拟书架选书显示书名--Apple的学习笔记我说过,学习example后,会进行些美化改造。之前做...

  • Three.js

    Three.js 1. 概述 1.1 什么是Three.js Three.js是一个3D javascript库。...

  • 使用Three.js+requestAnimationFrame

    前言 最近几天事情很多,学校在教育评估,不能在宿舍待着,因此笔记也就没做了。但对于Three.js的学习还算不错,...

  • Three.js 实现VR看房

    准备工作: 1、three.js https://threejs.org/build/three.js 2、搭建项...

  • three.js学习笔记(一)

    1、OrthographicCamera 正交投影照相机 2、PerspectiveCamera 透视投影照相机 ...

  • three.js 基础学习笔记

    threeJs 是用来方便快捷创建 3D 视图的库,内部对 WebGL 的接口进行了封装。使得编写代码的过程更加贴...

  • three.js 光与影学习笔记

    越来越感觉和绘画密切相关了,无论是光、影还是体积,都是绘画过程中追求的东西。 光源种类 环境光 先看一张图片 左边...

  • Three.JS 学习笔记——简介

    一、前言 Three.js (github) 是一个纯 JavaScript 实现的 3D 渲染库,其在前端 3D...

网友评论

      本文标题:Three.js学习笔记(1)

      本文链接:https://www.haomeiwen.com/subject/kwriwqtx.html