threejs 13 纹理texture-canvasTexture

Posted 2021-11-24 Jessica巨人

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";

var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();

var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);

var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial();
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);
//---------------------CanvasTexture--------------------------------
var canvas=document.createElement("canvas");

var canvasTexture=new THREE.CanvasTexture(canvas);
material.map=canvasTexture;
//-----------------------------------------------------------------

update()

function update() {
    console.log('刷新')
    renderer.render(scene, camera);
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}

//---------------------CanvasTexture--------------------------------
var canvas=document.createElement("canvas");

canvas.width=256;
canvas.height=256;

var context=canvas.getContext('2d');
// context.clearRect(0,0,256,256);
context.fillStyle='green';
context.fillRect(10,10,150,100);

var canvasTexture=new THREE.CanvasTexture(canvas);
material.map=canvasTexture;
//-----------------------------------------------------------------

//----------------sphere------------------------------------------
var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial({transparent:true});
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);

//---------------------CanvasTexture--------------------------------
var canvas=document.createElement("canvas");

canvas.width=256;
canvas.height=256;

var context=canvas.getContext('2d');
// context.clearRect(0,0,256,256);
context.fillStyle='green';
context.fillRect(10,10,150,100);

var canvasTexture=new THREE.CanvasTexture(canvas);
material.map=canvasTexture;
//-----------------------------------------------------------------

//----------------sphere------------------------------------------
var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial({transparent:true});
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);

//---------------------CanvasTexture--------------------------------
var canvas=document.createElement("canvas");

canvas.width=256;
canvas.height=256;

var context=canvas.getContext('2d');
context.fillStyle='blue';
context.fillRect(10,10,256,256);
// context.clearRect(0,0,256,256);
context.fillStyle='green';
context.fillRect(10,10,150,100);

var canvasTexture=new THREE.CanvasTexture(canvas);
material.map=canvasTexture;
//-----------------------------------------------------------------

var cubeGeometry = new BoxBufferGeometry(12, 12, 12);
var material = new THREE.MeshPhongMaterial({transparent:true});
var sphereMesh = new THREE.Mesh(cubeGeometry, material)
scene.add(sphereMesh);
//---------------------CanvasTexture--------------------------------
var canvas=document.createElement("canvas");

canvas.width=256;
canvas.height=256;

var context=canvas.getContext('2d');
context.fillStyle='#0077ff';
context.fillRect(0,0,256,256);
// context.clearRect(0,0,256,256);
context.fillStyle='#ffff00';
context.fillRect(10,10,150,100);

context.fillStyle='#000000';
context.font="12px Airal";
context.fillText("我是canvas纹理",40,60)

var canvasTexture=new THREE.CanvasTexture(canvas);
material.map=canvasTexture;
//-----------------------------------------------------------------