随笔分类 - WebGL
1
来自 B站 老陈的视频学习记录
摘要：<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import
阅读全文
摘要：1.重点代码 // 聚光灯 const spotLight = new THREE.SpotLight(0xffffff, 1) spotLight.position.set(5, 5, 5) spotLight.castShadow = true spotLight.intensity = 2 /
阅读全文
摘要：1. 重要步骤 // 目标：灯光与阴影 // 灯光阴影 // 1、材质要满足能够对光照有反应 // 2、设置渲染器开启阴影的计算 this.renderer.shadowMap.enabled = true; // 3、设置光照投射阴影 directionalLight.castShadow = t
阅读全文
摘要：1.重点代码 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader" // 加载hdr环境图 const rgbeLoader = new RGBELoader() rgbeLoader.loadAsync('others
阅读全文
摘要：1.重点代码 // 3. 添加物体 // 环境贴图与映射贴图 // 设置cub加载管理器 const cubeTextureLoader = new THREE.CubeTextureLoader() const envMapTexture = cubeTextureLoader.load([ re
阅读全文
摘要：1. 重点代码 // 设置加载管理器 let event = {} event.onLoad = () => { console.log('图片加载完成') } event.onProgress = (texture, num, total) => { console.log('图片:' + tex
阅读全文
摘要：1.重点代码 // 使用MeshStandardMaterial标准网格材质后 需要设置灯光 // 环境光 const light = new THREE.AmbientLight(0xffffff, 0.5) this.scene.add(light) // 直线光源 const directio
阅读全文
摘要：const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg')) const texture_s = new THREE.TextureLoader().load(require('../as
阅读全文
摘要：1. 重点代码 (1) （2） (3) // 3. 添加物体 // (1) 导入纹理图片 // const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg')) // 添加纹理属性 // 设置
阅读全文
摘要：1. 重点代码 // 3. 添加物体 打造酷炫三角形 for (let i = 0; i < 50; i++) { const geometry = new THREE.BufferGeometry() const positionArray = new Float32Array(9) // 每个三
阅读全文
摘要：<!-- 基础最终代码 --> <template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE fro
阅读全文
摘要：// 双击控制全屏他和退出全屏 window.addEventListener("dblclick", () => { const fullScreenElement = document.fullscreenElement if (!fullScreenElement) { // 用画布对象进入全
阅读全文
摘要：<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import
阅读全文
摘要：<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import
阅读全文
摘要：// init方法最后面 // 设置时钟 this.clock = new THREE.Clock() this.render() // 渲染函数 render () { // 物体会沿着x轴一直循环运动 // this.cube.position.x += 0.01 // this.cube.ro
阅读全文
摘要：// 渲染函数 render (time) { // 物体会沿着x轴一直循环运动 // this.cube.position.x += 0.01 // this.cube.rotation.x += 0.1 let t = (time / 1000) % 5 this.cube.position.x
阅读全文
摘要：<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import
阅读全文
摘要：我就不贴的代码了 前面有基础代码 // 添加坐标轴辅助器 const axesHelper = new THREE.AxesHelper( 5 ) this.scene.add( axesHelper )
阅读全文
摘要：<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import
阅读全文
摘要：<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' export
阅读全文
1
浙公网安备 33010602011771号