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 } ) ;
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;
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) ;
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) ;
}
var canvas= document. createElement ( "canvas" ) ;
canvas. width= 256 ;
canvas. height= 256 ;
var context= canvas. getContext ( '2d' ) ;
context. fillStyle= 'green' ;
context. fillRect ( 10 , 10 , 150 , 100 ) ;
var canvasTexture= new THREE. CanvasTexture ( canvas) ;
material. map= canvasTexture;
var sphereGeometry = new SphereBufferGeometry ( 5 , 12 , 12 ) ;
var material = new THREE. MeshPhongMaterial ( { transparent: true } ) ;
var sphereMesh = new THREE. Mesh ( sphereGeometry, material)
scene. add ( sphereMesh) ;
var canvas= document. createElement ( "canvas" ) ;
canvas. width= 256 ;
canvas. height= 256 ;
var context= canvas. getContext ( '2d' ) ;
context. fillStyle= 'green' ;
context. fillRect ( 10 , 10 , 150 , 100 ) ;
var canvasTexture= new THREE. CanvasTexture ( canvas) ;
material. map= canvasTexture;
var sphereGeometry = new SphereBufferGeometry ( 5 , 12 , 12 ) ;
var material = new THREE. MeshPhongMaterial ( { transparent: true } ) ;
var sphereMesh = new THREE. Mesh ( sphereGeometry, material)
scene. add ( sphereMesh) ;
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. 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) ;
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. 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;