首页 > 其他分享 >从three.js 开始

从three.js 开始

时间:2023-03-10 14:33:07浏览次数:40  
标签:const render 开始 THREE three camera renderer new js

02 本地运行
本地运行 加https 不能直接 localhost

1 本地

2 parcel js (类似webpack 等)
新建文件夹
npm init

npm install parcel-bundler 普通依赖
--save-dev 是设置为开发依赖
配置package.json
"scripts": {
"dev":"parcel src/index.html",
"build":"parcel build src/index.html",
"test": "echo "Error: no test specified" && exit 1"
},
npm install three --save

npm run dev 看效果
直接点击index 不行 会出现情况

3 开始

import * as THREE from 'three'
//  导入轨道控制
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"

console.log('t',THREE)

//  1 场景
const scene = new THREE.Scene()

//  2 相机  真实 透视相机  卡通 正交相机
// 透视
const camera =  new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)

camera.position.set(0,0,10)

scene.add(camera)

//  物体

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);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
console.log(renderer)
// canvas 添加到 body
document.body.appendChild(renderer.domElement)
// 使用渲染器,通过相机将场景渲染出来
// renderer.render(scene,camera)

//  创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)

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

render();

标签:const,render,开始,THREE,three,camera,renderer,new,js
From: https://www.cnblogs.com/caoxueyang/p/17203251.html

相关文章

  • java String转Json工具类
    importcom.fasterxml.jackson.core.JsonProcessingException;importcom.fasterxml.jackson.databind.ObjectMapper;importjava.util.HashMap;importjava.util.List;imp......
  • JS实现继承的几种方式
    前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。预备知识1、构造函数的属性funcionA(name){this.name......
  • 2023 最新 Three.js 快速入门教程 All In One
    2023最新Three.js快速入门教程AllInOneThree.js核心概念Shader着色器Render渲染器材质贴图纹理骨骼动画网格几何体模型灯光摄像机相机场景舞台......
  • ip2region 在nodejs中的使用
    ip2region在nodejs中的使用ip2regionv2.0-是一个离线IP地址定位库和IP定位数据管理框架,10微秒级别的查询效率,提供了众多主流编程语言的xdb数据生成和查询客户端实......
  • toFormData.js?9ba3:98 Uncaught (in promise) TypeError: target must be an object
    toFormData.js?9ba3:98Uncaught(inpromise)TypeError:targetmustbeanobject在做vue前端开发时,需要报错,,困扰我这个菜鸟挺久的,后来终于解决了,这里记录一下:  ......
  • js的一些设计模式概念记录
    工厂模式functioncreatePerson(name,age,job){leto=newObject();o.name=name;o.age=age;o.job=job;o.sayName=function(){console.lo......
  • JSON.parse()没反应
    https://www.runoob.com/json/json-parse.htmlhttps://blog.csdn.net/weixin_42700654/article/details/117782146JSON通常用于与服务端交换数据。在接收服务器数据时......
  • 问题记录:jss文件服务器定时任务下载失败
    jss文件服务器定时任务下载失败报错信息:客户端http连接池获取连接超时问题背景:每5min跑一次定时任务,从文件服务器下载文件更新内存,但是更新内存前会拿文件更新时间进行......
  • js字符串详解(一):什么是字符串,内置对象以及包装类型对象
    1.什么是:多个字符组成的只读字符数组   vs数组:下标i          length          slice() concat   不同:......
  • js字符串详解(二):字符串API
    所有字符串API都无权修改原字符串,只能返回新字符串!转换 1.大小写转换:将字符串中所有英文字母转为统一的大小写   何时:只要不区分大小写时,都要先转为一致的大......