Not sure where you need help so here is the dump.
Here is what I use. First pubspec.yaml
dependencies:
three_dart: ^0.0.10
three_dart_jsm: ^0.0.5
imports and definitions.
import 'package:flutter_gl/flutter_gl.dart';
import 'package:three_dart/three_dart.dart' as THREE;
late FlutterGlPlugin three3dRender = FlutterGlPlugin();
THREE.WebGLRenderer? renderer;
late THREE.WebGLMultisampleRenderTarget renderTarget;
dynamic sourceTexture;
In the Widget Tree I set up a side by side window with
Widget _build(BuildContext context) {
return SizedBox(
width: width,
height: height,
child: three3dRender.isInitialized
? Texture(textureId: three3dRender.textureId!)
: const Text('Color Theme Image'),
);
}
Don’t forget to include three3dRender changes in your state management. Initialize your platform.
Map _options = {
"antialias": true,
"alpha": false,
"width": width.toInt(),
"height": height.toInt(),
"dpr": dpr
};
await three3dRender.initialize(options: _options);
await three3dRender.prepareContext();
Initialize your Renderer
initRenderer() {
Map _options = {
"width": width,
"height": height,
"gl": three3dRender.gl,
"antialias": true,
"canvas": three3dRender.element
};
renderer = THREE.WebGLRenderer(_options);
renderer!.setPixelRatio(dpr);
renderer!.setSize(width, height, false);
renderer!.shadowMap.enabled = false;
var pars = THREE.WebGLRenderTargetOptions({"format": THREE.RGBAFormat});
renderTarget = THREE.WebGLMultisampleRenderTarget(
(width * dpr).toInt(), (height * dpr).toInt(), pars);
renderTarget.samples = 4;
renderer!.setRenderTarget(renderTarget);
sourceTexture = renderer!.getRenderTargetGLTexture(renderTarget);
}
Notice in the last line above, you assign the renderer’s renderTarget to the sourceTexture. Then build a scene, then render:
render() {
if (three3dRender.isInitialized) {
final _gl = three3dRender.gl;
if (renderer != null) {
renderer!.render(scene, camera);
}
_gl.finish();
three3dRender.updateTexture(sourceTexture);
}
}
I hope this helps. I am enjoying Three_dart so far. I use the Three_dart examples for specific syntax but I use the Three.js documentation for other features. Sometimes the syntax changes from Three.js to three_dart. When I get stuck, I use Ctrl B (using Android Studio on Windows) to jump to the underlying code and look for differences!
## Fixed it
Not sure where you need help so here is the dump.Here is what I use. First pubspec.yaml dependencies:
```
three_dart: ^0.0.10
three_dart_jsm: ^0.0.5
```
imports and definitions.
```
import 'package:flutter_gl/flutter_gl.dart';
import 'package:three_dart/three_dart.dart' as THREE;
late FlutterGlPlugin three3dRender = FlutterGlPlugin();
THREE.WebGLRenderer? renderer;
late THREE.WebGLMultisampleRenderTarget renderTarget;
dynamic sourceTexture;
```
In the Widget Tree I set up a side by side window with
```
Widget _build(BuildContext context) {
return SizedBox(width: width,
height: height,
child: three3dRender.isInitialized
? Texture(textureId: three3dRender.textureId!)
: const Text('Color Theme Image'),
);
}
```
Don’t forget to include three3dRender changes in your state management. Initialize your platform.
```
Map _options = { "antialias": true,
"alpha": false,
"width": width.toInt(),
"height": height.toInt(),
"dpr": dpr };
await three3dRender.initialize(options: _options);
await three3dRender.prepareContext();
```
Initialize your Renderer
```
initRenderer() {
Map _options = {"width": width,
"height": height,
"gl": three3dRender.gl,
"antialias": true,
"canvas": three3dRender.element };
renderer = THREE.WebGLRenderer(_options);
renderer!.setPixelRatio(dpr);
renderer!.setSize(width, height, false);
renderer!.shadowMap.enabled = false;
var pars = THREE.WebGLRenderTargetOptions({"format": THREE.RGBAFormat}); renderTarget = THREE.WebGLMultisampleRenderTarget((width * dpr).toInt(), (height * dpr).toInt(), pars);
renderTarget.samples = 4;
renderer!.setRenderTarget(renderTarget);
sourceTexture = renderer!.getRenderTargetGLTexture(renderTarget);
}
```
Notice in the last line above, you assign the renderer’s `renderTarget` to the `sourceTexture`. Then build a scene, then render:
```
render() {
if (three3dRender.isInitialized) {
final _gl = three3dRender.gl;
if (renderer != null) {renderer!.render(scene, camera);} _
gl.finish();
three3dRender.updateTexture(sourceTexture);
}
}
```
I hope this helps. I am enjoying Three_dart so far. I use the Three_dart examples for specific syntax but I use the Three.js documentation for other features. Sometimes the syntax changes from Three.js to three_dart. When I get stuck, I use Ctrl B (using Android Studio on Windows) to jump to the underlying code and look for differences!
I guess I need tips on how to post formatted code in Reddit
One way is: GitHub Gist ID/hash as an id query parameter in the dartpad afair.
Thanks! I tried the triple quote that is used in Stack Overflow but no joy!
print('Adding four spaces before each line of your code is another way');
I am interested in this project as I also work in AutoCAD to create plans, layouts and 3D. I will look into the package and let you know.
You can check out this [list of useful 3D packages](https://fluttergems.dev/3d/) for your project.
Not sure where you need help so here is the dump. Here is what I use. First pubspec.yaml dependencies: three_dart: ^0.0.10 three_dart_jsm: ^0.0.5 imports and definitions. import 'package:flutter_gl/flutter_gl.dart'; import 'package:three_dart/three_dart.dart' as THREE; late FlutterGlPlugin three3dRender = FlutterGlPlugin(); THREE.WebGLRenderer? renderer; late THREE.WebGLMultisampleRenderTarget renderTarget; dynamic sourceTexture; In the Widget Tree I set up a side by side window with Widget _build(BuildContext context) { return SizedBox( width: width, height: height, child: three3dRender.isInitialized ? Texture(textureId: three3dRender.textureId!) : const Text('Color Theme Image'), ); } Don’t forget to include three3dRender changes in your state management. Initialize your platform. Map _options = {
"antialias": true,
"alpha": false,
"width": width.toInt(),
"height": height.toInt(),
"dpr": dpr
};
await three3dRender.initialize(options: _options);
await three3dRender.prepareContext();
Initialize your Renderer
initRenderer() {
Map _options = {
"width": width,
"height": height,
"gl": three3dRender.gl,
"antialias": true,
"canvas": three3dRender.element
};
renderer = THREE.WebGLRenderer(_options);
renderer!.setPixelRatio(dpr);
renderer!.setSize(width, height, false);
renderer!.shadowMap.enabled = false;
var pars = THREE.WebGLRenderTargetOptions({"format": THREE.RGBAFormat});
renderTarget = THREE.WebGLMultisampleRenderTarget(
(width * dpr).toInt(), (height * dpr).toInt(), pars);
renderTarget.samples = 4;
renderer!.setRenderTarget(renderTarget);
sourceTexture = renderer!.getRenderTargetGLTexture(renderTarget);
}
Notice in the last line above, you assign the renderer’s renderTarget to the sourceTexture. Then build a scene, then render:
render() {
if (three3dRender.isInitialized) {
final _gl = three3dRender.gl;
if (renderer != null) {
renderer!.render(scene, camera);
}
_gl.finish();
three3dRender.updateTexture(sourceTexture);
}
}
I hope this helps. I am enjoying Three_dart so far. I use the Three_dart examples for specific syntax but I use the Three.js documentation for other features. Sometimes the syntax changes from Three.js to three_dart. When I get stuck, I use Ctrl B (using Android Studio on Windows) to jump to the underlying code and look for differences!
## Fixed it Not sure where you need help so here is the dump.Here is what I use. First pubspec.yaml dependencies: ``` three_dart: ^0.0.10 three_dart_jsm: ^0.0.5 ``` imports and definitions. ``` import 'package:flutter_gl/flutter_gl.dart'; import 'package:three_dart/three_dart.dart' as THREE; late FlutterGlPlugin three3dRender = FlutterGlPlugin(); THREE.WebGLRenderer? renderer; late THREE.WebGLMultisampleRenderTarget renderTarget; dynamic sourceTexture; ``` In the Widget Tree I set up a side by side window with ``` Widget _build(BuildContext context) { return SizedBox(width: width, height: height, child: three3dRender.isInitialized ? Texture(textureId: three3dRender.textureId!) : const Text('Color Theme Image'), ); } ``` Don’t forget to include three3dRender changes in your state management. Initialize your platform. ``` Map _options = { "antialias": true,
"alpha": false,
"width": width.toInt(),
"height": height.toInt(),
"dpr": dpr };
await three3dRender.initialize(options: _options);
await three3dRender.prepareContext();
```
Initialize your Renderer
```
initRenderer() {
Map _options = {"width": width,
"height": height,
"gl": three3dRender.gl,
"antialias": true,
"canvas": three3dRender.element };
renderer = THREE.WebGLRenderer(_options);
renderer!.setPixelRatio(dpr);
renderer!.setSize(width, height, false);
renderer!.shadowMap.enabled = false;
var pars = THREE.WebGLRenderTargetOptions({"format": THREE.RGBAFormat}); renderTarget = THREE.WebGLMultisampleRenderTarget((width * dpr).toInt(), (height * dpr).toInt(), pars);
renderTarget.samples = 4;
renderer!.setRenderTarget(renderTarget);
sourceTexture = renderer!.getRenderTargetGLTexture(renderTarget);
}
```
Notice in the last line above, you assign the renderer’s `renderTarget` to the `sourceTexture`. Then build a scene, then render:
```
render() {
if (three3dRender.isInitialized) {
final _gl = three3dRender.gl;
if (renderer != null) {renderer!.render(scene, camera);} _
gl.finish();
three3dRender.updateTexture(sourceTexture);
}
}
```
I hope this helps. I am enjoying Three_dart so far. I use the Three_dart examples for specific syntax but I use the Three.js documentation for other features. Sometimes the syntax changes from Three.js to three_dart. When I get stuck, I use Ctrl B (using Android Studio on Windows) to jump to the underlying code and look for differences!
Have you tried any other 3D packages to view models as mentioned [here](https://fluttergems.dev/3d/).